<template>
  <div style="margin-top: 30px;">
        <el-row>


          <el-upload ref="file" :file-list="field101fileList"
                     :action="field101Action"
                     :headers="headers"
                     :name="uploadVideoConfig.name"
                     :before-upload="field101BeforeUpload">
            <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>

            <div class="el-upload__tip" slot="tip">
             文件，且不超过{{ uploadVideoConfig.maxSize }}M
            </div>
          </el-upload>
        </el-row>
      <el-row style="margin-top: 30px">
        <el-input v-model="formData.field102" placeholder="请输入单行文本" clearable :style="{width: '30%'}">
        </el-input>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getFileUrl">获取下载文件链接</el-button>
      </el-row>
    <p>对应下载链接：{{fileurl}}</p>
    <h3>以下是图片展示内容</h3>
    <img :src="fileurl" />
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {getURL} from "@/api/system/imagefile";
export default {
  components: {},
  props: [],

  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      fileurl:"",
      uploadVideoConfig: {
        maxSize: 50, // 图片上传大小限制，默认不超过2M
        name: "file" // 图片上传字段
      },

      formData: {
        field102: 123,
        field101: null,
      },
      rules: {
        field102: [{
          required: true,
          message: '请输入单行文本',
          trigger: 'blur'
        }],
      },
      field101Action: 'http://localhost:8080/test/file/upload',
      field101fileList: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getFileUrl(){
      getURL({fileName:this.formData.field102}).then(response=>{
        this.fileurl = response.data.FileUrl;
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        request({
          url: '/test/file/upload',
          method: 'post',
          params
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field101BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 <= this.uploadVideoConfig.maxSize
      // if (!isRightSize) {
      //   this.$message.error('文件大小超过 2MB')
      // }
      return isRightSize
    },
  }
}

</script>
<style>

.el-upload__tip {
  line-height: 1.2;
}

</style>
